<template>
    <el-main class="image-main" v-loading="loading">
        <div class="top p-3">
            <el-row :gutter="10">
                <el-col :span="6" :offset="0" v-for="(item,index) in list" :key="index">
                    <el-card class="relative mb-3" shadow="hover" :body-style="{ padding: 0 }" :class="{'border-blue-500': item.checkbox}"> 
                        <el-image 
                            :src="item.url" 
                            fit="cover" 
                            :lazy="true" 
                            class="h-[150px]"
                            style="width:100%"
                            :preview-src-list=[item.url]
                            :initial-index="0"
                        ></el-image>
                        <div class="image-title">{{ item.name }}</div>
                        <div class="flex items-center justify-center p-2">
                            <el-checkbox v-if="props.choose" v-model="item.checkbox" @change="handleChoose(item)"/>
                            <el-button type="primary" size="small" text @click="handleEdit(item)">重命名</el-button>
                            <el-popconfirm 
                                title="是否要删除该图片?"
                                confirm-button-text="确认"
                                cancel-button-text="取消"
                                @confirm="handleDelete(item.id)"
                            >
                                <template #reference>
                                    <el-button type="primary" size="small" text class="!m-0">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            
        </div>
        <div class="bottom">
            <el-pagination 
                background layout="prev, pager, next" 
                :total="total" 
                :page-size="limit" 
                :current-page="currentPage"
                @current-change="getData"
            />
        </div>
        <el-drawer
            v-model="drawer"
            title="上传图片"
        >
            <UpLoadFile :data="{image_class_id}" @success="upLoadSuccess"/>
        </el-drawer>
    </el-main>

</template>

<script setup>
import { computed, ref } from 'vue'
import { getImageList,updateImage,deleteImage } from '~/api/image'
import { showPrompt,toast } from '~/composables/util'
import UpLoadFile from './UpLoadFile.vue'

// 响应式当前页面
const currentPage = ref(1)
// 总页数
const total = ref(0)
// 当前选中分类对应的Id
const image_class_id = ref(0)
// 每页显示条数
const limit = ref(10)
// 初始化加载动画
const loading = ref(false)
// 响应式设置抽屉的显示状态
const drawer = ref(false)
// 定义数组用于接收数据
const list = ref([])

// 获取数据方法
function getData(p=null){
    // 显示加载动画
    loading.value = true
    // 判断是否传入了参数且为整数
    if(typeof p == 'number'){
        // 赋值给currentPage
        currentPage.value = p
    }
    getImageList(image_class_id.value,currentPage.value).then(res => { 
        // console.log(res)
        // 赋值给list和total(并且处理后端数据给list增加复选框需要用的字段)
        list.value = res.data.list.map(item => {
            item.checkbox = false
            return item
        })
        total.value = res.data.totalCount
    }).finally(() => {
        // 最后隐藏加载动画
        loading.value = false
    })
}

// 选中分类的时候渲染图片
const loadImageData = (id) => {
    // 将当前页数设为1
    currentPage.value = 1
    // 赋值给image_class_id并请求数据
    image_class_id.value = id
    getData()
}

// 重命名图片方法
const handleEdit = (item) => {
    showPrompt('重命名',item.name)
    .then(({ value }) => {
        // 显示加载动画
        loading.value = true
        updateImage(item.id,value)
        .then(res => {
            toast('重命名成功')
            // 重新渲染图片
            getData()
        }).finally(() => {
            // 最后隐藏加载动画
            loading.value = false
        })
    })
}

// 删除图片方法
const handleDelete = (id) => {
    // 显示加载动画
    loading.value = true
    deleteImage([id])
    .then(res => {
        toast('删除成功')
        // 刷新数据
        getData()
    }).finally(() => {
        // 最后隐藏加载动画
        loading.value = false
    })
}

// 打开上传图片抽屉方法
const upLoadFileOpen = () => drawer.value = true

// 上传图片成功刷新图片页数据
const upLoadSuccess = () => getData(1)

// 实时计算选中的复选框数量
const checkImage = computed(() => list.value.filter(item => item.checkbox == true))

// 通知父组件选择正确通过
const emit = defineEmits(['choose'])

// 选中复选框事件
const handleChoose = (item) => {
    if(item.checkbox && checkImage.value.length > 1){
        item.checkbox = false
        return toast('最多只能选择一个图片', 'error')
    }
    emit('choose',checkImage.value,item)
}

// 接收父组件传递过来的参数,判读要不要显示复选框
const props = defineProps({
    choose:{
        type:Boolean,
        default:false
    }
})

// 向父组件暴露方法
defineExpose({
    loadImageData,
    upLoadFileOpen
})


</script>

<style scoped>
.image-main{
    position: relative;
}
.image-main .top{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
}
.image-main .bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  @apply flex items-center justify-center;
}
.image-title{
    position: absolute;
    top: 122px;
    left: -1px;
    right: -1px;
    @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1; 
}
</style>
